
<template>
    <div class="pane">
        <el-row :span="24" class="paneRow">
          <el-col :span="8">
            <div class="panBox">
              <div class="paneCon">
                <div>付费金额</div>
                <div class="positionDiv">
                        <span>
                            ¥{{(payPart.payPrice).toLocaleString('en-US')}}
                        </span>
                </div>
              </div>
              <div v-if="showCompareDate" class="ratio">
                <span v-show="parseFloat(payPart.payPriceRatio) >= 0"><img class="radio-icon" src="@/assets/img/up.png" alt=""></span>
                <span v-show="parseFloat(payPart.payPriceRatio) < 0"><img class="radio-icon" src="@/assets/img/down.png" alt=""></span>
                <div v-show="payPart.payPriceRatio !== '--'" class="radio-txt">{{Math.abs(parseFloat(payPart.payPriceRatio)).toLocaleString('en-US')}}%</div>
                <div v-show="payPart.payPriceRatio === '--'" class="radio-txt" style="margin-top: 0!important">
                  <el-tooltip effect="dark" placement="top">
                    <div slot="content" class="tooltips">
                      <p>对比日期下指标数据为0，所以无法对比！</p>
                    </div>
                    <p>{{payPart.payPriceRatio}}</p>
                  </el-tooltip>
                </div>
              </div>
              <div class="details-icon"
                   @mouseenter="enters('payPriceShow')"
                   @mouseleave="leaver('payPriceClose')"
              >
                <el-tooltip effect="dark" placement="top">
                  <div slot="content" class="tooltips">
                    <p>实际支付金额>0，且下单当日非退款且非活动赠送金额</p>
                  </div>
                  <img class="details-img" src="@/assets/img/details-icon.png" alt="">
                </el-tooltip>
              </div>
              <!--                <div v-show="isPayPrice" class="details">实际支付金额>0，且下单当日非退款且非活动赠送金额</div>-->
            </div>
          </el-col>
          <el-col :span="8">
            <div class="panBox">
              <div class="paneCon">
                <div>付费用户数</div>
                <div class="positionDiv">
                      <span>
                          {{(payPart.payNum).toLocaleString('en-US')}}
                      </span>
                </div>
              </div>
              <div v-if="showCompareDate" class="ratio">
                <span v-show="parseFloat(payPart.payNumRatio) >= 0"><img class="radio-icon" src="@/assets/img/up.png" alt=""></span>
                <span v-show="parseFloat(payPart.payNumRatio) < 0"><img class="radio-icon" src="@/assets/img/down.png" alt=""></span>
                <div v-show="payPart.payNumRatio !== '--'" class="radio-txt">{{Math.abs(parseFloat(payPart.payNumRatio)).toLocaleString('en-US')}}%</div>
                <div v-show="payPart.payNumRatio === '--'" class="radio-txt" style="margin-top: 0!important">
                  <el-tooltip effect="dark" placement="top">
                    <div slot="content" class="tooltips">
                      <p>对比日期下指标数据为0，所以无法对比！</p>
                    </div>
                    <p>{{payPart.payNumRatio}}</p>
                  </el-tooltip>
                </div>
              </div>
              <div class="details-icon" style='left: 128px;'
                   @mouseenter="enters('payNumShow')"
                   @mouseleave="leaver('payNumClose')"
              >
                <el-tooltip effect="dark" placement="top">
                  <div slot="content" class="tooltips">
                    <p>实际支付金额>0，且下单当日非退款且非活动赠送订单的用户数量（人）</p>
                  </div>
                  <img class="details-img" src="@/assets/img/details-icon.png" alt="">
                </el-tooltip>
              </div>
<!--                <div v-show="isPayNum" class="details">实际支付金额>0，且下单当日非退款且非活动赠送订单的用户数量</div>-->
            </div>
          </el-col>
          <el-col :span="8">
            <div class="panBox" style="border-right: none!important;">
              <div class="paneCon">
                <div>付费订单量</div>
                <div class="positionDiv">
                        <span>
                            {{(payPart.payCnt).toLocaleString('en-US')}}
                        </span>
                </div>
              </div>
              <div v-if="showCompareDate" class="ratio">
                <span v-show="parseFloat(payPart.payCntRatio) >= 0"><img class="radio-icon" src="@/assets/img/up.png" alt=""></span>
                <span v-show="parseFloat(payPart.payCntRatio) < 0"><img class="radio-icon" src="@/assets/img/down.png" alt=""></span>
                <div v-show="payPart.payCntRatio !== '--'" class="radio-txt">{{Math.abs(parseFloat(payPart.payCntRatio)).toLocaleString('en-US')}}%</div>
                <div v-show="payPart.payCntRatio === '--'" class="radio-txt" style="margin-top: 0!important">
                  <el-tooltip effect="dark" placement="top">
                    <div slot="content" class="tooltips">
                      <p>对比日期下指标数据为0，所以无法对比！</p>
                    </div>
                    <p>{{payPart.payCntRatio}}</p>
                  </el-tooltip>
                </div>
              </div>
              <div class="details-icon" style='left: 128px;'
                   @mouseenter="enters('payCntShow')"
                   @mouseleave="leaver('payCntClose')"
              >
                <el-tooltip effect="dark" placement="top">
                  <div slot="content" class="tooltips">
                    <p>实际支付金额>0，且下单当日非退款且非活动赠送订单数量（笔）</p>
                  </div>
                  <img class="details-img" src="@/assets/img/details-icon.png" alt="">
                </el-tooltip>
              </div>
              <!--                <div v-show="isPayCnt" class="details">实际支付金额>0，且下单当日非退款且非活动赠送订单数量</div>-->
            </div>
          </el-col>
        </el-row>
    </div>
</template>
<script>
export default {
    name: 'ksdatapane',
    props: {
        dataReportInfoYear: {
            type: Object,
            default: () => {},
        },
        payPart: {
          type: Object,
          default: () => {},
        },
        showCompareDate:{
          type: Boolean,
          default: () => { return false }
        }
    },
    components: {},
    data() {
        return {
          isPayCnt: false,
          isPayNum: false,
          isPayPrice: false
        }
    },
    computed: {},
    created() {},
    mounted() {},
    methods: {
      changeDate() {},
      enters(e){
        switch(e) {
          case 'payCntShow':
            this.isPayCnt = true
            break;
          case 'payNumShow':
            this.isPayNum = true
            break;
          case 'payPriceShow':
            this.isPayPrice = true
            break;
          default:
            this.isPayCnt = false
            this.isPayNum = false
            this.isPayPrice = false
        }

      },
      leaver(e){
        switch(e) {
          case 'payCntClose':
            this.isPayCnt = false
            break;
          case 'payNumClose':
            this.isPayNum = false
            break;
          case 'payPriceClose':
            this.isPayPrice = false
            break;
          default:
            this.isPayCnt = false
            this.isPayNum = false
            this.isPayPrice = false
        }
      }
    },
}
</script>
<style lang="scss" scoped>
.details-icon{
  width: 18px;
  height: 18px;
  position: absolute;
  //background-color: green;
  top: 43px;
  left: 113px;
}
.details-img{
  position: absolute;
  width: 100%!important;
  height: 100%!important;
  top: 0;
  left: 0;
}
.details{
  width: 280px;
  overflow: hidden;
  position: absolute;
  background-color: rgba(0,0,0,0.75);
  //opacity: 0.6;
  top: 28px;
  left: 139px;
  font-size: 15px;
  color: #FFFFFF;
  line-height: 20px;
  padding: 4px;
  box-sizing: border-box;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.tooltips{
  font-size: 15px;
  line-height: 20px;
}
.ratio{
  font-size: 17px;
  margin-top: 25px;
}
.radio-icon{
  width: 25px!important;
  height: 28px!important;
  margin-left: 28px;
}
.radio-txt{
  margin-top: -29px;
  margin-left: 50px;
}
.panBox{
  width: 100%;
  height: 80%;
  border-right: #9fa5b6 solid 1px;
  display: flex;
  justify-content: space-between;
  padding-right: 40px;
  padding-top: 15px;
  box-sizing: border-box;
}
.pane {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    ._619add {
        color: #619add;
    }
    .paneRow {
        width: 100%;
        box-shadow: 0px 2px 11px 0px rgba(228, 233, 238, 1);
    }
    .el-col {
        align-self: center;
        text-indent: 25px;
        padding: 0 2%;
        height: 138px;
        border-radius: 4px;
        display: flex;
        // flex-direction: column;
        justify-content: space-between;
        align-items: center;
        position: relative;
        background: #fff;
        font-size: 22px;
        //img {
        //    height: 48px;
        //    width: 44px;
        //    margin-top: 10px;
        //    margin-left: 25px;
        //}
        .paneCon {
            div {
                height: 30px;
                line-height: 30px;
            }
            div:nth-of-type(1) {
                color: #619add;
                height: 20px;
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 600!important;
                line-height: 20px;
                padding-top: 14px;
            }
            .positionDiv {
              height: 65px;
              line-height: 65px;
                span {
                    font-weight: 600!important;
                }
            }
        }
    }
    .hasNew {
        text-indent: 0;
        width: 54px;
        height: 23px;
        line-height: 23px;
        border-color: transparent;
        position: absolute;
        top: 10px;
        right: 0;
        border-radius: 30px 0 0 30px;
        background: #fff4f0;
        color: #d24a19;
    }
}
</style>
